import React, { useContext, useState } from "react";
import LocalFloristOutlinedIcon from "@mui/icons-material/LocalFloristOutlined";
import List from "@mui/material/List";
import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";
import StarBorder from "@mui/icons-material/StarBorder";
import Collapse from "@mui/material/Collapse";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import AlarmOnOutlinedIcon from "@mui/icons-material/AlarmOnOutlined";
import AssuredWorkloadOutlinedIcon from "@mui/icons-material/AssuredWorkloadOutlined";
import SendOutlinedIcon from "@mui/icons-material/SendOutlined";
import DriveFileRenameOutlineOutlinedIcon from "@mui/icons-material/DriveFileRenameOutlineOutlined";
import DeleteSweepOutlinedIcon from "@mui/icons-material/DeleteSweepOutlined";
import NewspaperOutlinedIcon from "@mui/icons-material/NewspaperOutlined";
import InsertPhotoOutlinedIcon from "@mui/icons-material/InsertPhotoOutlined";
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
import FeedOutlinedIcon from "@mui/icons-material/FeedOutlined";
import SportsKabaddiOutlinedIcon from "@mui/icons-material/SportsKabaddiOutlined";
import AccessibleForwardOutlinedIcon from "@mui/icons-material/AccessibleForwardOutlined";
import TravelExploreOutlinedIcon from "@mui/icons-material/TravelExploreOutlined";
import VolunteerActivismOutlinedIcon from "@mui/icons-material/VolunteerActivismOutlined";
import BorderColorIcon from "@mui/icons-material/BorderColor";
import { TitleContext } from "../../../router/index";
import NoteIcon from "@mui/icons-material/Note";
import { useNavigate } from "react-router-dom";
import ContentPasteSearchIcon from "@mui/icons-material/ContentPasteSearch";
export default function InnerBar(props) {
  const [open, setOpen] = useState(false);
  const handleClick = () => {
    setOpen(open ? false : true);
  };
  const getIcon = (x) => {
    if (x === 0) return <LocalFloristOutlinedIcon />;
    if (x === 1) return <AlarmOnOutlinedIcon />;
    if (x === 2) return <AssuredWorkloadOutlinedIcon />;
    if (x === 3) return <SendOutlinedIcon />;
    if (x === 4) return <DriveFileRenameOutlineOutlinedIcon />;
    if (x === 5) return <DeleteSweepOutlinedIcon />;
    if (x === 6) return <NewspaperOutlinedIcon />;
    if (x === 7) return <EmailOutlinedIcon />;
    if (x === 8) return <InsertPhotoOutlinedIcon />;
    if (x === 14) return <LinkOutlinedIcon />;
    if (x === 9) return <FeedOutlinedIcon />;
    if (x === 13) return <SportsKabaddiOutlinedIcon />;
    if (x === 10) return <AccessibleForwardOutlinedIcon />;
    if (x === 12) return <TravelExploreOutlinedIcon />;
    if (x === 11) return <VolunteerActivismOutlinedIcon />;
    if (x === 15) return <ContentPasteSearchIcon />;

    if (x == 16) return <BorderColorIcon />;
    return <StarBorder />;
  };
  const url = [
    "/index",
    "/homepage/setting",
    "/teach/score",
    "/teach/select",
    "/teach/otherCourse",
    "/teach/planning",
    "/teach/exam",
    "/moral/practice",
    "/moral/studentwork",
    "/moral/volunteer",
    "/moral/research",
    "/moral/comment",
    "/homepage/blog",
    "/moral/race",
  ];

  const titleContext = useContext(TitleContext);
  const navigate = useNavigate();
  const changePage = (e) => {
    // if (e !== titleContext.nowTitle) {
    // titleContext.setnowTitle(e);
    navigate("/student" + url[e]);
    // }
  };
  return (
    <div>
      <ListItemButton onClick={handleClick}>
        <ListItemIcon>{getIcon(props.icon)}</ListItemIcon>
        <ListItemText primary={props.title} />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItemButton>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          {props.list?.map((val, index) => (
            <ListItemButton
              selected={val.num === titleContext.nowTitle}
              onClick={() => changePage(val.num)}
              sx={{ pl: props.propen ? 4 : 2 }}
            >
              <ListItemIcon>{getIcon(val.icon)}</ListItemIcon>
              <ListItemText primary={val.name} />
            </ListItemButton>
          ))}
        </List>
      </Collapse>
    </div>
  );
}
